<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm :init-query="initQuery" v-model:value="queryForm" @submit="reloadTable">
        <template #more="{ queryForm }">
          #foreach($col in $columnList)
          #set($upropertyName="${col.propertyName.substring(0, 1).toUpperCase()}${col.propertyName.substring(1)}")
          <n-form-item label="${col.column_comment}">
            <n-input clearable v-model:value="queryForm['${col.propertyName}']" placeholder="输入${col.column_comment}"/>
          </n-form-item>
          #end
        </template>
        <template #default="{ queryForm }">
          #foreach($col in $columnList)
          #set($upropertyName="${col.propertyName.substring(0, 1).toUpperCase()}${col.propertyName.substring(1)}")
          <n-form-item label="${col.column_comment}">
            <n-input clearable v-model:value="queryForm['${col.propertyName}']" placeholder="输入${col.column_comment}"/>
          </n-form-item>
          #end
          <n-form-item label="创建时间">
            <n-date-picker clearable value-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-gte']" type="datetime"
                           placeholder="开始时间"/>
            <span class="ml-3 mr-3">-</span>
            <n-date-picker clearable alue-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-lte']" type="datetime"
                           placeholder="结束时间"/>
          </n-form-item>
          <n-form-item label="关键字">
            <n-input clearable v-model:value="queryForm['searchKey']" placeholder="请输入查询关键字"/>
          </n-form-item>
        </template>

      </QueryForm>
    </div>
    <div>
      <n-space>
        <n-button type="primary" :disabled="!vCtl.addBtn" @click="doSaveModal()">
          新建
        </n-button>
        <n-button type="warning" :disabled="!vCtl.updateBtn" @click="doUpdateModal()">
          编辑
        </n-button>
        <n-button type="error" :disabled="!vCtl.delBtn" @click="doDeleteModal()">
          删除
        </n-button>
      </n-space>
    </div>
    <BasicTable
        :columns="tableColumns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="tableRef"
        @update:checked-row-keys="onCheckedRowEvent"
        :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import {BasicTable, QueryForm} from "slash-admin";
import httpApi, {selectPageList} from "./httpApi";
import {
  checkedRows,
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  initQuery,
  onCheckedRowEvent,
  queryForm,
  reloadTable,
  vCtl,
  tableColumns,
  tableRef
} from "./Service";

export default defineComponent(
    {
      components: {BasicTable, QueryForm},
      props: {
        queryFormValue: {
          type: [Object],
          default: () => {
            return {
            };
          }
        }
      },
      setup(props,ctx) {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        const loadDataTable = async (res) => {
          console.log("更新", checkedRows.value);
          return await httpApi.selectPageList({
            searchKey: null,
            ...res,
            ...queryForm.value
          });
        };
        watch(props.queryFormValue, () => {
          queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
          console.log("更新完成")
        });
        return {
          loadDataTable,
          reloadTable,
          tableColumns,
          vCtl,
          onCheckedRowEvent,
          enabledOptions,
          queryForm,
          tableRef,
          initQuery,
          doSaveModal,
          doUpdateModal,
          doDeleteModal
        };
      }
    }
);


</script>

<style lang="less" scoped></style>
